//js动画函数封装


//draw绘制函数,可以把draw想象成一只画笔，随着函数的执行，这个画笔的函数会被反复调用
//并传入当前执行的进度progress，progress是一个介于0-1的number数字
const ball =document.querySelector('.ball');
const draw =(progress)=>{
    ball.style.transform =`translate(${progress}px,0)`
}


//easing缓动函数，决定了时间在线性增长过程中，实际的执行进度的变化，这个变化可以是线性的，
// 也可以是非线性的，或者多维度的
function easing(timeFraction){
    return timeFraction **2;
}

//duration持续时间,以毫秒为单位

//返回Promise的原因：动画可以是连续的，支持通过then函数或await进行顺序调用


function animate({easing, draw, duration}) {
    let start = performance.now();
    return new Promise(resolve => {
        requestAnimationFrame(function animate(time) {
            let timeFraction = (time - start) / duration;
            if (timeFraction > 1) timeFraction = 1;
            let progress = easing(timeFraction)
            draw(progress);
            if (timeFraction < 1) {
                requestAnimationFrame(animate);
            } else resolve();
        });
    });
}